<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=0"/>

    <!-- 删除苹果默认的工具栏和菜单栏 -->
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <!-- QQ强制全屏 -->
    <meta name="x5-fullscreen" content="true">
    <!-- UC强制全屏 -->
    <meta name="full-screen" content="yes">
    <link href="__TMPL__/public/assets/simpleboot3/themes/simpleboot3/bootstrap.min.css" rel="stylesheet">
    <link href="__TMPL__/public/assets/css/btn.css" rel="stylesheet">

    <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
    <script type="text/javascript" src="__STATIC__/js/layui/layui.all.js"></script>
    <script type="text/javascript" src="__STATIC__/js/layer/layer.js"></script>
    <title>卓远网络</title>
    <style>
    .yue {height: auto;overflow: hidden;}
    .yue_1{width:auto}
    @charset "utf-8";
    *{ margin:0; padding:0; list-style:none;}
    input[type="button"], 
    input[type="submit"], 
    input[type="reset"] 
    {
        -webkit-appearance: none;}

        a{color:#000; border:0px; text-decoration: none;}
        .content{ margin:0px auto; width:100%; height:auto; left:0px; right:0px; top:0px; bottom:0px; background:#f0f0f0;}
        .ding{ width:100%; background:#f77722; height:40px;}
        .huiyuan{width:60%;  text-align:center; height:40px; line-height:40px; color:#FFF; font-size:14px;}
        .xia{ width:20%;  height:40px; line-height:40px; text-align:center;}
        .home{ width:20%; height:40px; line-height:40px; text-align:center; }
        .huiyuanka{ width:90%; text-align:center; margin:10px auto;}
        .chushi{width:90%; text-align:center; margin:10px auto; color:#333; font-size:14px;}
        .kuang{width:90%; margin:10px auto; border:#999 1px solid; height:80px; border-radius:5px; background:#f5f5f5;}
        .kuang_1{width:90%; margin:10px auto; border:#999 1px solid; height:40px; border-radius:5px; background:#f5f5f5;}
        .kuang_2{width:90%; margin:10px auto; border:#999 1px solid; height:auto; border-radius:5px; background:#f5f5f5;}
        .yue{ width:100%; height:40px; line-height:40px; margin:0px auto;}
        .jifen{ width:100%; height:40px; line-height:40px; margin:0px auto;}

        .tubiao{ width:20%; float:left; margin-top:5px; margin-left:10px; }
        .yueyue{ width:35%; float:left; font-size:12px; }
        .jiantou{ width:15%; float:right; margin-top:5px; }

        .yue_1{width:45%; float:left; font-size:12px; margin-left:10px;}
        .yue_11{width:40%; float:left; font-size:12px; margin-left:10px;}

        .yue_2{width:30%; float:left; font-size:12px; margin-left:15px; color:#999;}
        .yue_22{width:15%; float:left; font-size:12px; margin-left:15px; color:#090;}
        .yue_222{width:15%; float:left; font-size:12px; margin-left:15px; color:#F00;}
        .yue_2222{width:50%; float:left; font-size:12px; margin-left:15px; color:#090;}
        .yue_3{width:25%; float:left; font-size:12px; margin-left:15px; color:#999; text-align:left;}
        .dingdan{ width:90%; margin:10px auto; font-size:14px; }

        .big{ width:100%; margin:10px auto; text-align:left;}
        .big_1{ width:100%; margin:10px auto; text-align:left; font-size:12px;}
        .zz{ float:left; width:40%; margin-left:15px;}
        .yy{ float:right; width:40%; text-align:right; margin-right:20px;}
        .yy_1{ float:right; width:40%; text-align:right; margin-right:20px; color:#090;}

        .bigxia{ width:100%; margin:20px auto; }
        .tp{ float:left; width:20%; margin-left:10px;}
        .wz{ float:right; width:70%; margin-top:10px; text-align:right; margin-right:10px;}
        .wzz{ width:50%; float:left; font-size:12px; color:#333; text-align:left;}
        .wzj{ width:20%; float:left;font-size:12px; color:#333; text-align:left;}
        .wzy{ width:30%; float:left;font-size:12px; color:#333;}

        .bai{ width:100%; background:#FFF; margin-top:10px;}
        .bai_1{ width:100%; background:#FFF; margin-top:10px; height:200px;}
        .yu{ font-size:14px; margin-left:10px; height:30px; line-height:30px;}
        .zzz{ width:90%; font-size:12px; color:#666; line-height:30px; margin-left:20px;}
        .foot{ width:100%; height:20px; text-align:center; margin:0px auto; font-size:12px; color:#999; margin-top:30px;}
        .foot a{  font-size:12px; color:#999; margin-top:30px;}

        .canvasDiv{
            height: 260px;
            width: 100%;
            border: 1px solid black;
        }
        .imgDiv{
            height: 50px;
            width: 80px;
            border: 1px solid black;
            margin-top: 15px;
        }
        .btnDiv{
            height: 100px;
            width: 100%;
            margin-top: 15px;
        }
        .clearBtn{
            font-size: 22pt;
            background:#e57727;
            border: 0;
            margin-left: 25%;
        }
        .okBtn{
            font-size: 22pt;
            background: #36a5d9;
            border: 0;
            margin-left: 15%;
        }

    </style>
</head>

<body style="background:#f0f0f0;">

    <div class="content">
        <div class="ding" style="background:#1B9AF7">
            <table width="100%" border="0" cellspacing="0" cellpadding="0">
              <tr>
                <td class="xia"><img src="img/xia.png" width="25" height="25" style="opacity: 0"/></td>
                <td class="huiyuan">卓远网络</td>
                <td class="home"><img src="img/home.png" width="25" height="25" style="opacity: 0"/></td>
            </tr>
        </table>
    </div>
    <div style="width: 100%;height:1.2rem"></div>
    <div class="container">

     <input type="hidden" value="<?php echo $_GET['id'];?>" id="id">
<?php if($sign=="") {?>
     <div class="row">
         <div class="col-xs-12 col-md-8" style="width:100%;height:100%;margin: 27px 0">

            <div class="canvasDiv" style="display: none;position: fixed;left: 0px;top:0px;background-color: #ccc;width: 100%;height: 100% ;border: 1px solid #1B9AF7;box-shadow: 0 0 8px #007eff">
                <div id="editing_area">
                    <canvas id="canvasEdit"></canvas>
                </div>
            </div>
            <div class="imgDiv" style="display: none">
                <span id="sign_show"></span>
            </div>



        </div>
    </div>
    <?php }?>



 
<div class="row">
     <div class="col-xs-12 col-md-12">
<?php if($sign!=""){ ?>
    <div style="margin:0px auto;width: 300px;">
        <img src="{$sign}" style="width: 300px;height: 150px;" alt="签名图片" />
    </div>
 <?php }else{ ?>

        <div class="btnDiv" style="display: none;position: absolute;right: 0px;top: 0px;width: 150px;">
            <div style="margin-top: 10px;">
             <button id="sign_cancel" style="margin-right: 0.3rem" onclick="qrqx();" class="button  button-default">取消</button>
         </div>
         <div style="margin-top: 10px;">
            <button id="sign_clear" style="margin-right: 0.3rem" class="button  button-caution">重签</button>
        </div>

        <div style="margin-top: 10px;">
         <button id="sign_ok" style="margin-right: 0.3rem" class="button   button-primary">确认</button>
     </div>
 </div>

 <div style="margin-top: 10px;text-align: center;">
    <button id="sign_qz" style="width:100%;margin-right: 0.3rem" onclick="qrqz();" class="button   button-primary">点击此处签字(<span style="color: red;">!</span>提交后不可更改)</button>
</div>
<?php } ?>
</div>
</div>


</div>
<div style="clear:both"></div>
<div class="foot"><a href="tel:13553004737">技术支持：卓远网络</a></div>
<div style="width:100%; height:10px;"></div>
</div>
<div class="tishi" style="display: none;position: fixed;left: 0;top:0;width:100%;height: 100%;margin-top:50px;text-align: center;">
    <span>正在处理请稍后...</span>
</div>

<script type="text/javascript">
    function abc11() {
      var url="";
      layer.open({
          type: 2,
          title: false,
          shadeClose: true,
          shade: 0.8,
          area: ['95%', '95%'],
  content: url //iframe的url
}); 
  }
</script>
<script type="text/javascript">
   $(function(){

       var ww ='100%';$(".canvasDiv").width();
       var hh ='100%';$(".canvasDiv").height();

       $("#canvasEdit").css('width',ww);
       $("#canvasEdit").css('height',hh);

   });

/*
 * 利用Canvas实现简单的签字功能
 *
 * 在引入该JS后需要进行初始化动作
 * $().esign(canvasEdit, sign_show, sign_clear, sign_ok);
 * 其中四个参数均为需要的DOM的ID，允许传入null或""等，视为启用默认ID
 *
 * 需要的HTML包括：
 * 1.一个确定了大小的canvas区域，ID需要通过参数传入jQuery插件，如果不传则默认视canvasEdit为id
 * 2.一个用于显示签名结果的div去，id不传默认视为sign_show
 * 3.一个清除按钮，点击清空当前画板，id如若不传则视为sign_clear
 * 4.一个完成按钮，点击生成签名图片并显示在指定区域，id不传视为sign_ok
 *
 * tip:鼠标只要出了画图范围就视为松开鼠标
 * */

 (function (root, doc, factory) {
    //根据加载方式不同，载入jQuery（根据你的requie命名自定义修改）
    if (typeof define === "function" && define.amd) {
        define( ["jquery"], function ($) {
            return factory($);
        });
    } else {
        factory(root.jQuery);
    }
}(this, document, function($) {
    $.fn.esign = function(canvasEdit, sign_show, sign_clear, sign_ok) {

        //初始化相关DOM，获得结果寄存命名空间
        var domMap = domInit(canvasEdit, sign_show, sign_clear, sign_ok);
        //获取画板引用
        var canvas = domMap.canvasEdit[0];
        //注册相关事件
        if (typeof document.ontouchstart != "undefined") {      //适配移动设备
            canvas.addEventListener('touchmove', onMouseMove, false);
            canvas.addEventListener('touchstart', onMouseDown, false);
            canvas.addEventListener('touchend', onMouseUp, false);
        } else {      //适配电脑
            canvas.addEventListener('mousemove', onMouseMove, false);
            canvas.addEventListener('mousedown', onMouseDown, false);
            canvas.addEventListener('mouseup', onMouseUp, false);
            canvas.addEventListener('mouseleave', onMouseUp, false);
        }
        //初始化上下文和参数
        var context = canvas.getContext('2d');
        var linex = new Array();
        var liney = new Array();
        var linen = new Array();
        var lastX = 1;
        var lastY = 30;
        var flag = 0;

        //注册按钮相关事件
        domMap.sign_ok.on("click",function(){
            preview();
            rewrite();
        });

        domMap.sign_clear.click(function(){
            clearImg();
            rewrite();
        });

        /*
        *方法声明
        */

        //相关DOM初始化动作，如果不传入则使用查找默认ID
        function domInit(canvasEdit, sign_show, sign_clear, sign_ok){
            var domMap = {};

            if(!canvasEdit){
                domMap.canvasEdit = $("#canvasEdit");
            } else{
                domMap.canvasEdit = $("#" + canvasEdit);
            }

            if(!sign_show){
                domMap.sign_show = $("#sign_show");
            } else{
                domMap.sign_show = $("#" + sign_show);
            }

            if(!sign_clear){
                domMap.sign_clear = $("#sign_clear");
            } else{
                domMap.sign_clear = $("#" + sign_clear);
            }

            if(!sign_ok){
                domMap.sign_ok = $("#sign_ok");
            } else{
                domMap.sign_ok = $("#" + sign_ok);
            }

            return domMap;
        }

        //根据鼠标坐标获取绘图坐标
        function getCanvasPos(canvas, evt) {
            var rect = canvas.getBoundingClientRect();
            var x, y;
            if (evt.targetTouches) {
                x = evt.targetTouches[0].clientX;
                y = evt.targetTouches[0].clientY;
            } else {
                x = evt.clientX;
                y = evt.clientY;
            }
            return {
                x: (x - rect.left) * (canvas.width / rect.width),
                y: (y - rect.top) * (canvas.height / rect.height)
            }
        }

        //鼠标移动的时候
        function onMouseMove(evt)
        {
            var x = getCanvasPos(canvas, evt).x,
            y = getCanvasPos(canvas, evt).y;

            //判断是否处于按下状态
            if (flag == 1) {
                //如果是则画图
                linex.push(x);
                liney.push(y);
                linen.push(1);
                context.save();
                context.translate(context.canvas.width / 2, context.canvas.height / 2);
                context.translate(-context.canvas.width / 2 , -context.canvas.height/2);
                context.beginPath();
                context.lineWidth = 2;
                for (var i = 1; i < linex.length; i++) {
                    lastX = linex[i];
                    lastY = liney[i];
                    if (linen[i] == 0)
                        context.moveTo(lastX, lastY);
                    else
                        context.lineTo(lastX, lastY);
                }
                context.shadowBlur = 10;
                context.stroke();
                context.restore();
            }
            evt.preventDefault();
        }

        //当鼠标按下的时候修改按下标志，并开始记录坐标
        function onMouseDown(evt) {
            var x = getCanvasPos(canvas, evt).x,
            y = getCanvasPos(canvas, evt).y;
            flag = 1;
            linex.push(x);
            liney.push(y);
            linen.push(0);
        }

        //鼠标松开清除标志
        function onMouseUp() {
            flag = 0;
        }

        //清空绘制区域
        function rewrite(){
            linex = new Array();
            liney = new Array();
            linen = new Array();
            context.clearRect(0, 0, canvas.width, canvas.height);
        }

        //清理已生成照片
        function clearImg(){
            domMap.sign_show[0].innerHTML = "";
        }

        //填充生成的图片
        function preview(){
            var show = domMap.sign_show[0];
            
            show.innerHTML = "";
            show.appendChild(convertCanvasToImage(canvas));
            
            
        }

        //生成签字图片，图片大小自行修改
        function convertCanvasToImage(canvas){
            var image = new Image();
            
            image.width = 80;
            image.height = 50;
            image.src = canvas.toDataURL("i/png");
            return image;
            
        }
    };
    return $.fn.esign;
}));    

</script>
<script type="text/javascript">
    $(function(){
        //初始化动作，根据DOM的ID不同进行自定义，如果不写则内部默认取这四个
        $().esign("canvasEdit", "sign_show", "sign_clear", "sign_ok");  
    });
    
    
</script>

<script type="text/javascript">
    $("#sign_ok").click(function(){
        setTimeout(function() {   
            var img = $("#sign_show").children("img").attr("src");
            var id = $("#id").val();
            var url = "{:url('index/yhqm')}";
            $.ajax({
                url:url,
                data:{img:img,id:id},
                dataTyps:'json',
                type:'post',
                beforeSend:function(){
                    $('.tishi').css('display',"block");
                },
                success:function(data){

                    $('.tishi').css('display',"none");
                    if(data==1){
                        layer.msg("确认成功", { shift: -1 }, function () {
                            window.location.href=window.location.href;
                        });
                    }else{
                        layer.msg('请稍后再试！');
                    }
                }
            });

        });
    });

    function qrqx(){
        alert('请将手机置于竖屏！');
    }
    function qrqz(){
        if (window.orientation === 180 || window.orientation === 0) { 
            alert('请将横屏开关打开，旋转手机至横屏,无法横屏请转到浏览器打开！');
        } else{
            $(".canvasDiv").css('display','block');
            $('.btnDiv').css('display','block');
            $('#sign_qz').css('display','none');
        }
    }
    window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", function() {
      if (window.orientation === 180 || window.orientation === 0) { 
        $(".canvasDiv").css('display','none');
        $('.btnDiv').css('display','none');
        $('#sign_qz').css('display','block');
    } 
    if (window.orientation === 90 || window.orientation === -90 ){ 
   //alert('横屏状态！');
   $(".canvasDiv").css('display','block');
   $('.btnDiv').css('display','block');
   $('#sign_qz').css('display','none');
} 
}, false);
</script>
<script type="text/javascript" src="__STATIC__/js/admin.js"></script>
</body>
</html>
